var from = Number(getURLParameter('from') || 0);
var AddressHeader = React.createClass({
    handleMyClick: function(){
        if(from === FROM.confirm){
            // history.go(-1);
            window.location.replace('confirm.html');
        }else {
            window.location.href = 'userInfos.html';
        }
    },
    handleAddClick: function () {
        if(from === FROM.confirm){
            window.location.replace('addressInfo.html?from='+from);
        }else {
            window.location.href = 'addressInfo.html';
        }
    },
    render: function() {
        return(
            <header data-am-widget="header" className="am-header am-header-default am-header-fixed  am-no-layout">
                <div className="am-header-left am-header-nav">
                    <a onClick={this.handleMyClick} className="widht-10s"><i className="icon_8"></i></a>
                </div>
                <h1 className="am-header-title">我的地址</h1>
                <div className="am-header-right am-header-nav">
                    <a onClick={this.handleAddClick}><i className="faxian_187"></i></a>
                </div>
            </header>
        )
    }
});

var AddressItem = React.createClass({
    handleEditorClick: function (e) {
        window.location.replace('addressInfo.html?aId='+this.props.data.id+'&from='+from);
        e.stopPropagation();
        e.preventDefault();
    },
    handleDelClick: function (e) {
        // $('#confirm').modal('open');
        this.props.showDialog('是否确定删除该地址？');
        this.props.setAddrId(this.props.data.id);
        e.stopPropagation();
        e.preventDefault();
    },
    handleClick: function(e){
        if(from === FROM.confirm){
            // window.location.href='confirm.html?aId='+this.props.data.id;
            window.location.replace('confirm.html?aId='+this.props.data.id);
        }else if(from === FROM.userInfo){
            window.location.href='userInfos.html';
        }else {
             window.location.href='addressInfo.html?aId='+this.props.data.id+(from ? ('&from='+from) : '');
        }
        e.stopPropagation();
        e.preventDefault();
    },
    render: function() {
        return (
            <li className="am-g am-list-item-desced am-margin-bottom-sm" onClick={this.handleClick}>
                <div className="am-g font-14">
                    <div onclick="window.location.href='06.html'">
                        <div className="am-u-sm-4">{this.props.data.reciver_name}</div>
                        <div className="am-u-sm-8">{this.props.data.phone}</div>
                        <div className="am-u-sm-12 am-margin-top-xs am-margin-bottom-xs">{this.props.data.location+this.props.data.detail}</div>
                    </div>
                    <div className="am-u-sm-12 am-text-right font-14">
                        <div className=" border-tops am-padding-top-sm padding-bottom-7">
                            <div className="box">
                                <div className="box-1 am-text-left font-color-main">
                                    <span>{this.props.data.default == "1" ? '默认' : ''}</span>
                                </div>
                                <div>
                                    <span onClick={this.handleEditorClick}><span className="btnedit">编辑</span></span>
                                    <span className="am-margin-left-sm data-delete">
                                        <span onClick={this.handleDelClick} className="btndelete">删除</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        )
    }
});
var AddressList = React.createClass({
    render: function() {
        var itemDivs = [];
        this.props.list.forEach(function(value, index){
            itemDivs.push(<AddressItem key={index} data={value} showDialog={this.props.showDialog} setAddrId={this.props.setAddrId}/>);
        }.bind(this));
        return (
            <section id="amz-main" data-tag="css-nav">
                <div id="address_list" className="am-list-news am-list-news-default am-address address-color">
                    <div className="am-list-news-bd">
                        <ul className="am-list">{itemDivs}</ul>
                    </div>
                </div>
             </section>
        )
    }
});

var Page = React.createClass({
    getInitialState: function() {
        return{
            msg: '',
            msgHidden: true,
            dialogMsg: '',
            dialogHidden: true,
            list: [],
            curAddrId: ''
        }
    },
    componentWillMount: function(){
        this.qryAddressList();
    },
    showMsg: function(msg) {
        this.setState({
            msg: msg,
            msgHidden: false
        });
        return false;
    },
    closeMsg: function(){
        this.setState({
            msgHidden: true
        });
    },
    showDialog: function(msg){
        this.setState({
            dialogMsg: msg,
            dialogHidden: false
        });
    },
    closeDialog: function() {
        this.setState({
            dialogHidden: true
        });
    },
    setAddrId: function(id) {
        this.setState({
            curAddrId: id
        });
    },
    qryAddressList: function() {
        $.ajax(
            getAjaxOps('/address/qryAddressList', {
                userId: USER.userId
            })
        ).done(function(res){
            if(res.resultCode == 0) {
                this.setState({
                    list: res.data
                })
            }
        }.bind(this));
    },
    delAddress: function() {
        $.ajax(
            getAjaxOps('/address/delete', {
                id: this.state.curAddrId
            })
        ).done(function(res){
            if(res.resultCode == 0) {
                this.qryAddressList(); //刷新地址列表
            }else {
                this.showMsg(res.resultMsg);
            }
        }.bind(this));
    },
    render: function() {
        return (
            <div>
                <AddressHeader />
                <AddressList list={this.state.list} showDialog={this.showDialog} setAddrId={this.setAddrId}/>
                <Message msg={this.state.msg} hidden={this.state.msgHidden} close={this.closeMsg} />
                <Dialog msg={this.state.dialogMsg} hidden={this.state.dialogHidden} close={this.closeDialog} on={this.delAddress} />
            </div>
        )
    }
});
ReactDOM.render(
    <Page />,
    document.getElementById('root')
);
